<template>
    <div class="app-container">
        <el-form ref="formRef" inline :model="formModel">
            <el-row class="row-margin">
                <el-form-item
                    prop="operType"
                    label="入库类型"
                    required
                    :rules="[{ required: true, message: '必须选择一个入库类型' }]"
                >
                    <el-select v-model="formModel.operType" placeholder="入库类型">
                        <el-option
                            v-for="item in operTypes"
                            :key="item.type"
                            :label="item.desc"
                            :value="item.type"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row class="row-margin">
                <el-button type="primary" size="small" @click="handleOpenChooseGoodsModal"
                    >选择商品</el-button
                >
            </el-row>
            <el-table :data="dataList" style="width: 100%" border>
                <el-table-column label="商品" width="300" align="center">
                    <template slot-scope="scope">
                        <el-row type="flex" justify="center" align="center">
                            <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                                <img :src="scope.row.resourceUrl" />
                            </el-avatar>
                            <div class="goods-info">
                                <div class="goods-name" :title="scope.row.name">
                                    {{ scope.row.goodsName }}
                                </div>
                            </div>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.unit }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="库存" prop="totalStock" align="center">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.totalStock }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="新增入库" prop="operStock" align="center">
                    <template slot-scope="scope">
                        <span>
                            <el-input v-model="scope.row.operStock"></el-input>
                            <!-- 
                                @change="onUpdateStock(scope.$index, scope.row, $event)"
                            -->
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="供货单价" prop="sellPrice" align="center">
                    <template slot-scope="scope">
                        <span>￥ {{ formatMoney(scope.row.sellPrice) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="onDeleteRow(scope.$index)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-row class="row-margin">
                <el-form-item label="备注信息" prop="remark">
                    <el-input
                        type="textarea"
                        v-model="formModel.remark"
                        style="width: 500px"
                        :rows="2"
                    ></el-input>
                </el-form-item>
            </el-row>
            <el-row type="flex" class="row-margin">
                <el-button type="primary" size="small" @click="onCreateStorageGoods"
                    >保存</el-button
                >
                <el-button size="small" @click="handleGoBack">返回</el-button>
            </el-row>
        </el-form>
        <el-dialog :visible.sync="chooseGoodsModalVisible" width="80%" title="选择商品">
            <choose-goods-modal
                destroy-on-close
                :visible.sync="chooseGoodsModalVisible"
                @confirm="handleAddChoosedGoods"
                @hide="handleCloseChooseGoodsModal"
            ></choose-goods-modal>
        </el-dialog>
    </div>
</template>
<script>
import { getCateList, getSupplierList } from '@/api/goodsBase';
import { getStorageInTypes, addStorageIn } from '@/api/storage';
import { formatMoney } from '@/utils/goods';
import ChooseGoodsModal from './components/chooseGoodsModal';
export default {
    components: {
        ChooseGoodsModal
    },
    mounted() {},
    data() {
        return {
            chooseGoodsModalVisible: false,
            operTypes: [],
            dataList: [],
            formModel: {
                operType: null,
                remark: null
            }
        };
    },
    created() {
        this.fetchStorageInTypes();
    },
    methods: {
        handleOpenChooseGoodsModal() {
            this.chooseGoodsModalVisible = true;
        },
        handleCloseChooseGoodsModal() {
            this.chooseGoodsModalVisible = false;
        },
        handleAddChoosedGoods(goods) {
            this.chooseGoodsModalVisible = false;
            this.dataList = Array.from(
                goods.map(good => {
                    return {
                        ...good,
                        intimeStock: good.totalStock
                    };
                })
            );
        },
        onUpdateStock(index, row, ev) {
            row.intimeStock = ev.target.val;
            this.$set(this.dataList, index, row);
        },
        onDeleteRow(index) {
            this.dataList.splice(index, 1);
        },
        onCreateStorageGoods() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    let data = {
                        ...this.formModel,
                        items: this.dataList
                    };
                    addStorageIn(data).then(res => {
                        if (res.data.success) {
                            this.$message({
                                message: '创建入库成功!',
                                type: 'info',
                                duration: 1000
                            });
                            this.$refs.formRef.resetFields();
                            this.dataList = [];
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration: 3000
                            });
                        }
                    });
                } else {
                    console.log('Submit error');
                    return false;
                }
            });
        },
        handleGoBack() {
            this.$router.replace('/storage/storageIn');
        },
        formatMoney(num) {
            return formatMoney(num);
        },
        fetchStorageInTypes() {
            getStorageInTypes().then(res => {
                if (res.data && res.data.success == true) {
                    this.operTypes = res.data.data;
                } else {
                    this.operTypes = [];
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped></style>
